<template>
  <div class="dashboard-form">
    <el-row :gutter="20" justify="end">
      <el-col :span="6">
        <div class="col-flex">
          <span>feature:</span>
          <el-select
            v-model="featureValue"
            placeholder="请选择feature"
            size="small"
          >
            <el-option
              v-for="item in featureList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>
      <el-col :span="2">
        <el-button type="success" size="small" @click="search" round>
          查询
        </el-button>
      </el-col>
    </el-row>
    <el-table :data="formData">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="handleClick(scope.row, 0)" size="small">
            查看
          </el-button>
          <el-button @click="handleClick(scope.row, 1)" size="small">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗 -->
    <dialogForm ref="formRefs" />
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';
import dialogForm from './dialogForm.vue';

export default {
  components: { dialogForm },
  setup() {
    const cycleValue = ref(true);
    const featureValue = ref('');
    const featureList = ref([
      { value: '相机', label: '1' },
      { value: '屏幕', label: '1' },
      { value: '指纹', label: '1' },
    ]);
    const formData = ref([]);
    const formRefs = ref(null);
    onMounted(() => {
      formData.value = [
        { id: 1, name: '俞锐', address: '南京市' },
        { id: 2, name: '张三', address: '苏州市' },
        { id: 3, name: '李四', address: '合肥市' },
        { id: 4, name: '王五', address: '扬州市' },
      ];
    });
    const search = () => {
      console.log('查询');
    };
    // type (0: 查看 1: 编辑)
    const handleClick = (row, type) => {
      formRefs.value.show(row, type);
    };
    return {
      cycleValue,
      featureValue,
      featureList,
      formData,
      formRefs,
      search,
      handleClick,
    };
  },
};
</script>
<style lang="scss" scoped>
.dashboard-form .col-flex {
  display: flex;
  align-items: center;
  span {
    margin-right: 10px;
  }
}
</style>
